@import "../../../themes/basic/base-all.less";

.ti3-textarea-container {
  --ti-textarea-counter-height: var(--ti-common-size-4x);
  --ti-textarea-counter-margin-top: 2px;
}

@textarea-name: tiTextarea;

.textarea-resize-slash(@color, @size, @position) {
    content: "";
    width: @size;
    height: @size;
    display: block;
    border-bottom: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) @color;
    transform: rotate(135deg);
    bottom: @position;
    right: @position;
    position: absolute;
}
.textarea-resize-color(@color) {
  &:before{
    border-bottom-color: @color;
  }
  &:after {
    border-bottom-color: @color;
  }
}
.textarea-color(@color) {
  border-color: @color;
  & ~ .ti3-textarea-resize-icon {
    .textarea-resize-color(@color);
  }
}

//处理校验失败时textarea右下角三角颜色问题
textarea{
  @{tiny-invalid-class}{
    &~ .ti3-textarea-resize-icon{
      &:before{
        border-bottom-color: var(--ti-common-color-error-border) !important;
      }
      &:after {
        border-bottom-color: var(--ti-common-color-error-border) !important;
      }
    }
  }
}

.ti3-textarea-container {
  min-height: var(--ti-common-size-16x);
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  line-height: normal;

  & > textarea[@{textarea-name}] {
    .form-border-animat-init();
    overflow-x: hidden;
    width: 100% !important;
    height: 100% !important;
    resize: none !important;
    border-radius: var(--ti-common-border-radius-normal);
    border: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-line-normal);
    color: var(--ti-common-color-text-primary);
    font-size: var(--ti-common-font-size-base);
    font-weight: var(--ti-common-font-weight-4);
    background-color: var(--ti-common-color-bg-white-normal);
    padding: var(--ti-common-space-6) var(--ti-common-space-10);
    .box-sizing(border-box);
    outline: none;
    vertical-align: middle;
    &:disabled {
      background-color: var(--ti-common-color-bg-disabled);
      color: var(--ti-common-color-text-disabled);
      border-color: var(--ti-common-color-line-disabled);
      cursor: not-allowed !important;
    }

    &:not(:disabled) {
      &:hover {
        .textarea-color(var(--ti-common-color-line-hover));
        .form-border-animat-enter();
      }
      &:focus{
        .textarea-color(var(--ti-common-color-line-active));
        .form-border-animat-enter();
      }
      &.ti3-textarea-resize-border {// textareaa拉伸时,边框和小三角颜色的设置
        .textarea-color(var(--ti-common-color-line-active));
        .form-border-animat-enter();
      }
    }
  }

  & > .ti3-textarea-resize-icon {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    cursor: nw-resize;
    &:before {
      .textarea-resize-slash(var(--ti-common-color-line-normal), 8.4px, -2px);
    }
    &:after {
      .textarea-resize-slash(var(--ti-common-color-line-normal), 4.2px, 0px);
    }
  }

  & > .ti3-textarea-counter {
    height: var(--ti-textarea-counter-height);
    line-height: var(--ti-textarea-counter-height);
    display: block;
    .box-sizing(border-box);
    position: absolute;
    right: 0;
    margin-top: var(--ti-textarea-counter-margin-top);
    text-align: right;
    color: var(--ti-common-color-text-weaken);
    font-size: var(--ti-common-font-size-base);
    font-weight: var(--ti-common-font-weight-4);
    background-color: var(--ti-common-color-bg-white-normal);
    & > .ti3-textarea-counter-count {
      color:var(--ti-common-color-text-primary);
      font-size: var(--ti-common-font-size-base);
      font-weight: var(--ti-common-font-weight-4);
    }
  }

  &.ti3-textarea-container-counter {
    & > textarea[@{textarea-name}] {
      height: calc(100% - var(--ti-textarea-counter-height) - var(--ti-textarea-counter-margin-top)) !important;
    }
    & > .ti3-textarea-resize-icon {
      bottom: calc(var(--ti-textarea-counter-height) + var(--ti-textarea-counter-margin-top));
    }
  }
}

.ti3-unselectable {
  .user-select(none);
}